<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="tabs">
				<u-tabs
					:list="list1"
					lineColor="#4BC264"
					@change="change"
					:current="current"
					:activeStyle="{
						color: '#1C274C',
						fontWeight: 'bold',
						transform: 'scale(1.02)'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 50px; padding-right: 50px; height: 42px;"
				></u-tabs>
			</view>
		</u-sticky>
		
		<view class="box z-flex-x-s-b">
			<view class="each" v-for="i in 3">
				<image src="../../static/logo.png" mode=""></image>
				<view class="sb-time">识别时间</view>
				<view class="time">2021-04-08 09:52:00</view>
				<u-line length="283rpx" style="margin: auto; margin-top: 24rpx"></u-line>
				<view class="blacklist">加入黑名单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					{
						name: '门禁记录'
					},
					{
						name: '黑名单'
					}
				],
				current:0,
			}
		},
		methods: {
			change(e){
				console.log(e)
				this.current = e.index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f8fa;
	}
	.tabs {
		padding: 0 32rpx;
		display: flex;
		justify-content: center;
	}
	
	.box {
		padding: 0 32rpx;
		flex-wrap: wrap;
		.each {
			padding: 16rpx 16rpx 24rpx 16rpx;
			width: 299rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 24rpx;
			image {
				width: 299rpx;
				height: 299rpx;
				background: #D9D9D9;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
			.sb-time {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
				padding: 24rpx 0 0 16rpx;
			}
			.time {
				font-weight: bold;
				font-size: 22rpx;
				color: #1C274C;
				padding: 8rpx 0 0 16rpx;
			}
			.blacklist {
				font-weight: 500;
				font-size: 22rpx;
				color: #FF1818;
				text-align: center;
				margin-top: 24rpx;
			}
		}
	}
</style>
